<template>
  <div class="numlog">
    <div class="header">
        手机号登录
        <router-link tag="div" to="/person" class="imgs">
            <img src="../assets/imgs/返回箭头.png" alt="">
        </router-link>
    </div>
    <div class="write">
        <input type="text" name="" id="" placeholder="请输入手机号" v-model="phone">
    </div>
    <div class="write">
        <input type="password" name="" id="" placeholder="请输密码" v-model="password">
    </div>
    <p>
        登录表示同意<span>服务协议与隐私协议</span>
    </p>
    <div class="agree" @click="submit">
        同意协议并登录
    </div>
    <div class="another">
        选择其他方式登录
    </div>
    <div class="qqwx">
        <div class="wx">
            <div class="svg">
                <svg t="1666853294085" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4604" width="200" height="200"><path d="M571.648 511.94c-10.257 0-20.517 9.525-20.517 21.25 0 9.527 10.255 19.053 20.517 19.053 15.393 0 26.385-9.527 26.385-19.053 0-11.724-10.99-21.25-26.385-21.25v0zM504.225 413c16.123 0 26.385-10.257 26.385-25.651 0-16.123-10.261-25.649-26.385-25.649-15.39 0-30.048 9.527-30.048 25.649-0.001 15.396 14.659 25.651 30.048 25.651v0zM512.287 62.492c-248.427 0-449.813 201.386-449.813 449.813 0 248.425 201.386 449.812 449.813 449.812 248.425 0 449.812-201.386 449.812-449.812 0.001-248.427-201.385-449.813-449.812-449.813v0zM427.275 626.265c-27.119 0-46.906-4.394-72.556-11.725l-74.019 37.38 21.257-63.031c-52.035-36.64-82.818-82.811-82.818-139.243 0-99.67 93.808-175.889 208.137-175.889 101.135 0 191.279 60.097 208.867 145.113-7.328-1.469-13.926-2.199-19.788-2.199-99.67 0-176.619 74.75-176.619 164.894 0 15.388 2.199 29.313 5.863 43.972-5.863 0.728-12.461 0.728-18.324 0.728v0zM732.882 698.085l14.655 52.77-55.697-31.512c-21.252 4.394-41.773 10.99-63.025 10.99-98.206 0-175.889-67.422-175.889-150.968 0-83.547 77.685-150.97 175.889-150.97 93.072 0 176.619 67.423 176.619 150.97 0 46.9-31.512 88.673-72.552 118.721v0zM359.117 361.7c-15.39 0-31.512 9.527-31.512 25.649 0 15.395 16.122 25.656 31.512 25.656 14.66 0 26.385-10.261 26.385-25.656 0-16.122-11.725-25.649-26.385-25.649v0zM686.712 511.94c-10.995 0-20.522 9.525-20.522 21.25 0 9.527 9.527 19.053 20.522 19.053 14.655 0 25.649-9.527 25.649-19.053 0-11.724-10.994-21.25-25.649-21.25v0zM686.712 511.94z" p-id="4605" fill="#0e932e"></path></svg>
                
            </div>
            <p>微信登录</p>
        </div>
        <div class="qq">
            <div class="svg">
                <svg t="1666853158131" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3595" width="200" height="200"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64z m210.5 612.4c-11.5 1.4-44.9-52.7-44.9-52.7 0 31.3-16.2 72.2-51.1 101.8 16.9 5.2 54.9 19.2 45.9 34.4-7.3 12.3-125.6 7.9-159.8 4-34.2 3.8-152.5 8.3-159.8-4-9.1-15.2 28.9-29.2 45.8-34.4-35-29.5-51.1-70.4-51.1-101.8 0 0-33.4 54.1-44.9 52.7-5.4-0.7-12.4-29.6 9.4-99.7 10.3-33 22-60.5 40.2-105.8-3.1-116.9 45.3-215 160.4-215 113.9 0 163.3 96.1 160.4 215 18.1 45.2 29.9 72.8 40.2 105.8 21.7 70.1 14.6 99.1 9.3 99.7z" p-id="3596" fill="#1296db"></path></svg>

            </div>
            <p>QQ登录</p>
        </div>
    </div>
  </div>
</template>

<script>
export default {
    data(){
        return{
            phone:"",
            password:"",
        }
    },
     methods:{
        submit(){
            let reg = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
            let pass = /^[a-zA-Z0-9]\w{8,17}$/;
            if(!reg.test(this.phone) || !pass.test(this.password) ){//不正确处理
                    this.$toast("手机号码密码错误");
                    return;
            }else{
                window.localStorage.setItem("token",this.phone)
                this.$toast("登录成功");
                this.$router.push("/home");
                return
            }
        }
    }
}
</script>

<style lang="scss">
.numlog .qqwx{
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 20px;
    .wx{
        width: 50px;
        height: 70px;
        margin-right: 20px;
        .svg{
            width: 50px;
            height: 50px;
            svg{
                width: 50px;
                height: 50px;
            }
        }
    }
    .qq{
         width: 50px;
        height: 70px;
        margin-left: 20px;
        .svg{
            width: 50px;
            height: 50px;
            svg{
                width: 50px;
                height: 50px;
            }
        }
    }
}
.numlog .another{
    width: 100%;
    text-align: center;
    height: 20px;
    font-size: 12px;
    color: #c4c4c4;
    margin-top: 90px;
}
.numlog .agree{
    width: 96%;
    margin: 16px auto 0;
    height: 46px;
    background-color:#cd4130;
    color: #fff;
    border-radius: 8px;
    text-align: center;
    line-height: 46px;
    font-size: 14px;
    letter-spacing:2px;
}
.numlog .header{
    width: 100%;
    margin-top: 5px;
    height: 60px;
    position: relative;
    text-align: center;
    line-height: 60px;
    font-size: 18px;
    font-weight: 500;
    border-bottom: 1px solid #dfdfdf;
}
.numlog .header .imgs{
    position: absolute;
    top: 20px;
    left: 10px;
    width: 20px;
    height: 20px;
}
.numlog .header .imgs img{
    width: 100%;
}
.numlog .write{
    width: 96%;
    margin: 8px auto;
    height: 40px;
    background-color: red;
}
.numlog .write input{
    width: 100%;
    height: 100%;
    outline: none;
    border: none;
    text-indent: 10px;
    background-color: #f7f7f7;
    border-bottom: 1px solid #dfdfdf;

}
.numlog p{
    width: 96%;
    margin: 0 auto;
    color: #757575;
    font-size: 12px;
}
.numlog p span{
    display: inline-block;
    color: #5992e1;
    font-size: 12px;
    margin: 0 4px;
}
</style>